<template>
  <div id="header">
    <ul class="head">
      <!-- <router-link to="/" tag="li">首页</router-link> -->
      <li @click="goHome" :class="{on:isOn===-1}">首页</li>
      <li @click="goCategory('玄幻小说',0)" :class="{on:isOn===0}">玄幻小说</li>
      <li @click="goCategory('修真小说',1)" :class="{on:isOn===1}">修真小说</li>
      <li @click="goCategory('都市小说',2)" :class="{on:isOn===2}">都市小说</li>
      <li @click="goCategory('科幻小说',3)" :class="{on:isOn===3}">科幻小说</li>
      <li @click="goCategory('历史小说',4)" :class="{on:isOn===4}">历史小说</li>
      <li @click="goCategory('网游小说',5)" :class="{on:isOn===5}">网游小说</li>
      <li @click="goCategory('言情小说',6)" :class="{on:isOn===6}">言情小说</li>
      <li @click="goCategory('其他小说',7)" :class="{on:isOn===7}">其他小说</li>
      <!-- <router-link to="/bookcase" tag="li" style="margin-left:200px">书架</router-link> -->
      <li @click="goBookcase" :class="{on:isOn===8 }" style="margin-left:200px">书架</li>
      <template v-if="!userInfo">
        <li @click="goRegist" :class="{on:isOn===9 }">注册</li>
        <li @click="goLogin" :class="{on:isOn===10 }">登录</li>
      </template>
      <li v-else>
        {{userInfo.nickname}},<span @click="logout" style="color:blue">退出</span>
      </li>
      
    </ul>
    <!-- 注册 -->
    <a-modal v-model="visibleRegist" title="注册" :footer="null">
      <a-form-model ref='registForm' :model="registForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
        :rules="rules">
        <a-form-model-item label="用户名" prop="nickName">
          <a-input v-model="registForm.nickName" required></a-input>
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input v-model="registForm.password" required type="password"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
          <a-button type="primary" @click="onSubmit">
            立即注册
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 登录 -->
    <a-modal v-model="visibleLogin" title="登录" :footer="null">
      <a-form-model ref='loginForm' :model="loginForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
        :rules="rules">
        <a-form-model-item label="用户名" prop="nickName">
          <a-input v-model="loginForm.nickName" required></a-input>
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input v-model="loginForm.password" required type="password"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
          <a-button type="primary" @click="onLogin">
            登录
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { Modal, Input, Button, message } from "ant-design-vue";
import { regist,login } from "@/api/index.js";
export default {
  data: () => {
    return {
      isOn: 0,
      visibleRegist: false,
      visibleLogin: false,
      registForm: {
        nickName: "",
        password: "",
      },
      loginForm: {
        nickName: "",
        password: "",
      },
      rules: {
        nickName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "Length should be 1 to 12",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            message: "密码至少6位",
            trigger: "blur",
          },
        ],
      },
      userInfo:null
    };
  },
  mounted(){
    let userInfo = localStorage.getItem('USER_INFO')
    if(userInfo){
      this.userInfo = JSON.parse(userInfo)
    }
  },
  components: {
    "a-modal": Modal,
    "a-input": Input,
    "a-button": Button,
  },
  methods: {
    goCategory(cate, num) {
      this.isOn = num;
      this.$store.commit("updateCategory", cate);
      if (this.$route.path != "/category") {
        this.$router.push({ name: "category" });
      }
    },
    goHome() {
      this.$router.push("/");
      this.isOn = -1;
    },
    goBookcase() {
      this.$router.push("/bookcase");
      this.isOn = 8;
    },
    goRegist() {
      this.isOn = 9;
      this.visibleRegist = true;
    },
    goLogin() {
      this.isOn = 10;
      this.visibleLogin = true
    },
    // 注册
    onSubmit() {
      this.$refs.registForm.validate((valid) => {
        if (valid) {
          regist(this.registForm).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
              message.success(res.data.msg);
              this.visibleRegist = false;
            } else {
              message.error(res.data.msg || "注册失败");
              this.visibleRegist = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 登录
    onLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          login(this.loginForm).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              message.success("登录成功");
              this.visibleLogin = false;
              this.userInfo = res.data.data
              localStorage.setItem("USER_INFO",JSON.stringify(res.data.data))
            } else {
              message.error("登录失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    logout(){
      this.userInfo = null
      localStorage.removeItem("USER_INFO")
    }
  },
};
</script>

<style lang="less" scope>
@media screen and(max-width:420px) {
  head {
    display: none;
  }
  .head {
    display: none;
  }
}
@media screen and(min-width:420px) {
  #header {
    height: 33px;
    background: #4095d5;
    width: 100%;
    margin-bottom: 1px;
    position: fixed;
    z-index: 3;
    .head {
      width: 1100px;
      margin: 0 auto;
      display: block;
      height: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      li {
        cursor: pointer;
      }
    }
  }

  .recommend li,
  .rank li {
    cursor: pointer;
  }
}
.on {
  color: red;
}
</style>